<template>
    <div class="app-container">
        <div class="pageTitle">
            <div class="pageTitleSub">
                <el-form ref="queryForm" :model="queryParams" label-width="100px" size="small">
                    <el-row :gutter="5">
                        <el-col :span="6">
                            <el-form-item label="车牌号" prop="plateNo">
                                <el-input v-model="queryParams.plateNo" placeholder="请输入车牌号" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="入场时间" prop="startGmtEntry">
                                <el-date-picker
                                    v-model="queryParams.startGmtEntry"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    placeholder="选择日期时间" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="结束时间" prop="endGmtEntry">
                                <el-date-picker
                                    v-model="queryParams.endGmtEntry"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    placeholder="选择日期时间" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="pageBtn">
                <el-button size="small" type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
<!--                <el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>-->
            </div>
        </div>

        <page-main>
            <el-table ref="orderTable" v-loading="isLoading" class="actionTable" stripe :data="tableData"
                      header-cell-class-name="table-header" style="width: 100%;" border :row-class-name="tableRowClassName">
                <el-table-column
                    prop="plateNo"
                    label="车牌号码"
                    align="center" width="120"
                    show-overflow-tooltip />
                <el-table-column
                    prop="gmtEntry"
                    label="入场时间"
                    width="180"
                    align="center">
                    <template slot-scope="scope">
                         <span v-if="scope.row.gmtEntry != null">
                            {{
                                 scope.row.gmtEntry.replace(/T/, " ").substring(0, 19)
                             }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="gmtLeave"
                    label="出场时间"
                    width="180"
                    align="center">
                    <template slot-scope="scope">
                       <span v-if="scope.row.gmtLeave != null">
                            {{
                               scope.row.gmtLeave.replace(/T/, " ").substring(0, 19)
                           }}
                        </span>
                    </template>
                </el-table-column>
<!--                <el-table-column-->
<!--                    prop="vehicleBrand"-->
<!--                    label="车辆品牌"-->
<!--                    align="center" width="120"-->
<!--                    show-overflow-tooltip />-->
<!--                <el-table-column-->
<!--                    prop="subBrand"-->
<!--                    label="子品牌"-->
<!--                    align="center" width="120"-->
<!--                    show-overflow-tooltip />-->
                <el-table-column
                    prop="vehicleTypeName"
                    label="车辆类型"
                    align="center" width="180"
                    show-overflow-tooltip />
    <!--                <el-table-column-->
    <!--                    label="操作"-->
    <!--                    align="center"-->
    <!--                    width="200">-->
    <!--                    <template slot-scope="scope">-->
    <!--&lt;!&ndash;                        <el-button type="text" size="small" icon="el-icon-document-checked" @click="lawPaperwork(scope.row)">执法文书</el-button>&ndash;&gt;-->
    <!--                        <el-button type="text" size="small" icon="el-icon-document" @click="handleViews(scope.$index)">查看详情</el-button>-->
    <!--                    </template>-->
    <!--                </el-table-column>-->
            </el-table>

            <div class="Pagination" style="width: 1100px;">
                <el-pagination
                    background
                    layout="total, sizes,prev, pager, next,jumper"
                    :current-page.sync="queryParams.CurrentPage"
                    :page-size="20"
                    :page-sizes="[20]"
                    :total="totalCount"
                    @current-change="handleCurrentChange" />
            </div>
        </page-main>
        <el-dialog title="案件处理" :visible.sync="dialogCaseInfoVisible" width="1300px">
            <el-tabs type="border-card">
                <el-tab-pane label="基本信息">
                    <CaseInformation :information="information" :limit-info="limitInfo" :show="show" @cancelEstablishingCase="closeDialog" />
                </el-tab-pane>
                <el-tab-pane label="文书信息">
                    <InstrumentInfo :_event="wsEvent" :limit-info="limitInfo" :current-process-id="currentProcessId" />
                </el-tab-pane>
            </el-tabs>
            <el-row :gutter="8" style="margin-top: 15px;">
                <el-col :span="12" :offset="12">
                    <el-row>
                        <el-col :span="6"><el-button type="primary" size="mini" plain style="width: 80px;" @click="dialogCaseInfoVisible = false">关闭</el-button></el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-dialog>
<!--        <ExamDetail-->
<!--            ref="examDetail"-->
<!--            :total="totalCount"-->
<!--            :table-size="tableSize"-->
<!--            :current-page="queryParams.CurrentPage"-->
<!--            :init-detail-data="detailData"-->
<!--            :indexs="index"-->
<!--            step="qt"-->
<!--            @handleViews="handleViews"-->
<!--            @getList="handleCurrentChange" />-->
        <EntranceoutDetail
            ref="entranceoutDetail"
            :total="totalCount"
            :table-size="tableSize"
            :current-page="queryParams.CurrentPage"
            :init-detail-data="detailData2"
            :indexs="index"
            step="qt"
            @handleViews="handleViews"
            @getList="handleCurrentChange" />
        <el-dialog title="执法文书"
                   :visible.sync="zfws"
                   width="70%">
            <InstrumentInfo :_event="wsEvent" :limit-info="limitInfo" :current-process-id="currentProcessId" />
        </el-dialog>
    </div>
</template>
<script>
import {GetEntranceHistory} from '@/api/parkUnloadApi';
import moment from 'moment';
// import CrossingSelect from '@/modules/components/CrossingSelect';
import DictSelect from '@/modules/components/DictSelect';
// import CaseInformation from '@/modules/components/caseInfo/caseInformation';
import EntranceoutDetail from '@/modules/components/entranceoutDetail';
// import ExamDetail from '@/modules/components/examDetail';
// import InstrumentInfo from '@/modules/components/instrument-info/index';
export default {
    name: 'entrance-out-history',
    components: {
        // CrossingSelect,
        DictSelect,
        // CaseInformation,
        // ExamDetail,
        // , InstrumentInfo
        EntranceoutDetail
    },
    data() {
        return {
            sfkcFlag: false,
            wsEvent: '',
            showTab: {
                overrunActionProof: true,
                overrunVehicleNotification: true
                /* InquiryRecord: true,
                    SurveyReportCompany: true,
                    placedCaseTableCompany: true,
                    IllegalActNoticeCompany: true,
                    serviceReturnReceiptCompanyIAN: true,
                    OnSitePunishment: true,
                    OrderCorrectionNoticeCompany: true,
                    closeReportCompany: true,
                    CoverCompany: true,*/
            },
            totalSize: 0,
            zfws: false,
            crossing_arr: [],
            queryParams: {
                plateNo: '',
                startGmtEntry: '',
                endGmtEntry: '',
                CurrentPage: 1
            },
            isLoading: false,
            tableData: [],
            tableData1: [],
            detailData: {},
            detailData1: {},
            detailData2: {},
            index: 0,
            tableSize: 0,
            totalCount: 0,
            dialogCaseInfoVisible: false,
            // 案件基本信息
            information: {},
            // 超限信息
            limitInfo: {},
            currentProcessId: '',
            show: true
        };
    },
    created() {

    },
    mounted() {

            this.getList();

    },
    methods: {
        tableRowClassName({row, rowIndex}) {
            if (((this.$refs['entranceout-detail'] && this.$refs['entranceout-detail'].outerVisible || this.zfws  || this.dialogCaseInfoVisible) && row == this.detailData)) {
                return 'selected-row';
            }
            return '';
        },
        moment,
        showZfws(row) {
            this.detailData = row;
            this.currentProcessId = row.process_id;
            this.limitInfo = row;
            this.wsEvent = '5';
            this.zfws = true;

        },
        handleViews(i) {
            this.index = i;
            this.detailData2 = this.tableData[i];
            this.$refs['entranceoutDetail'].show();

            this.$forceUpdate();
        },
        handleQuery() {
            this.getList();
        },
        resetQuery() {
            this.queryParams.Plate_no = '';
            this.queryParams.Vehicle_weight = '';
            this.queryParams.Vehicle_weight1 = '';
            this.queryParams.Over_rate = '';
            this.queryParams.Over_rate1 = '';
            this.queryParams.Axle_num = '';
            this.queryParams.Crossing_id = '';
            this.queryParams.Pass_time1 = '';
            this.queryParams.Pass_time2 = '';
            this.queryParams.CurrentPage = 1;
            this.getList();
        },
        handleCurrentChange(val) {
            this.queryParams.CurrentPage = val;
            this.getList();
        },
        getList() {
            this.isLoading = true;
            GetEntranceHistory(this.queryParams).then(res => {
                this.isLoading = false;
                this.tableData = res.res.GetEntranceHistory;
                this.tableSize = this.tableData.length;
                if (this.tableData && this.tableData.length > 0) {
                    this.totalCount = this.tableData[0].totalCount;
                }
                this.totalSize = this.tableData[0].totalCount;

            }).catch(err => {
                this.isLoading = false;
                console.log(err);
            });
        },
        closeDialog() {
            this.dialogCaseInfoVisible = false;
        }
    }
};
</script>

<style scoped>
    .table-header {
        background-color: #f8f8f8 !important;
    }
    /deep/
    .el-table td {
        padding: 5px 0 !important;
    }
    /deep/
    .el-button--text {
        padding: 7px 0;
    }
</style>

